<template>
  <div>今天学习vue</div>

  <div>
    {{username}}{{age}}
  </div>

  <div @click="clickBtn">{{person.username}}的密码{{person.password}}</div>
  <button @click="changSchool">点击修改毕业状态{{person.isSchool}}</button>

  <div>
    <select v-model="result" style="width:300px">
      <option v-for="item in opitions">{{item.name}}</option>
    </select>

    <div>选择的结果:{{result}}</div>

    <div>
      请输入:<input v-model="result"/>
    </div>

    <div>
      <span v-if="person.isSchool">
        {{person.username}}未毕业
      </span>
      <span v-else>
        {{person.username}}已毕业
      </span>
    </div>

    <button @click="changSchool">
      @修改毕业状态
    </button>
    <button v-on:click="changSchool">
      v-on:修改毕业状态
    </button>

    <div>
      <img :src="person.headImage" :style="person.ImageStyle">
    </div>

    <el-button type="primary" :icon="Edit" />
    <el-button type="primary" :icon="Share" />
    <el-button type="primary" :icon="Delete" />
    <el-button type="primary" :icon="Search">Search</el-button>
    <el-button type="primary">
      Upload<el-icon class="el-icon--right"><Upload /></el-icon>
    </el-button>
  </div>

  <div>
    <el-button type="primary" loading>Loading</el-button>
    <el-button type="primary" :loading-icon="Eleme" loading>Loading</el-button>
    <el-button type="primary" loading>
      <template #loading>
        <div class="custom-loading">
          <svg class="circular" viewBox="-10, -10, 50, 50">
            <path
                class="path"
                d="
            M 30 15
            L 28 17
            M 25.61 25.61
            A 15 15, 0, 0, 1, 15 30
            A 15 15, 0, 1, 1, 27.99 7.5
            L 15 15
          "
                style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"
            />
          </svg>
        </div>
      </template>
      Loading
    </el-button>
    <el-icon><StarFilled /></el-icon>

    <div>
      <el-input
          v-model="input"
          style="width: 240px"
          placeholder="请输入"
      />

      <el-input
          v-model="input"
          style="width: 240px"
          disabled
          placeholder="维护中"
      />

      <el-input
          v-model="input"
          style="width: 240px"
          type="password"
          placeholder="请输入密码"
          show-password
      />
      <span>{{input}}</span>
    </div>
    <div>
      <el-select v-model="value" placeholder="请选择" style="width: 240px">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>
    </div>

    <div class="mb-2 ml-4">
      <el-radio-group v-model="radio1">
        <el-radio value="Java" size="large">Java</el-radio>
        <el-radio value="Python" size="small">Python</el-radio>
      </el-radio-group>
      <span>{{radio1}}</span>
    </div>

    <div>
      <el-checkbox v-model="checked1" label="大海" size="large" />
      <el-checkbox v-model="checked2" label="高山" size="large" />
    </div>

    <div>
      <el-image
          style="width: 100px; height: 100px"
          :src="person.headImage"
          :zoom-rate="1.2"
          :max-scale="7"
          :min-scale="0.2"
          :preview-src-list="srcList"
          show-progress
          :initial-index="4"
          fit="cover"
      />
    </div>
    <div>
      <div>
        <el-table :data="tableInfo" style="width: 100%" stripe border>
          <el-table-column prop="date" label="时间" width="180" />
          <el-table-column prop="name" label="姓名" width="180" />
          <el-table-column prop="address" label="地址" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button type="danger" @click="deleteHandler(scope.row)">
                <el-icon>
                  <delete></delete>
                </el-icon>
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div>
        <el-pagination
            v-model:current-page="pageInfo.currentPage1"
            v-model:page-size="pageInfo.pageSize"
            :page-sizes="[5, 10, 15, 20]"
            layout="sizes, prev, pager, next"
            :total="tableData.length"
        />
      </div>
    </div>


  </div>
</template>

<script setup>
import { Delete, Edit, Search, Share, Upload, Eleme} from '@element-plus/icons-vue'
import {computed, onMounted, reactive, ref} from "vue"

const pageInfo = reactive({
  //当前的页面
  currentPage1:1,
  //每页显示的数量
  pageSize:5
})

//专门属性计算computed的函数
//计算table里面应该显示多少数据
const tableInfo=computed(()=>{
  //计算当前table这一页应该从哪条数据显示到哪条数据
  //第二页：6-10
  let start=(pageInfo.currentPage1-1)*pageInfo.pageSize
  //末尾
  let end=start+pageInfo.pageSize
  return tableData.slice(start,end)
})

const value = ref('')
const options = [
  {
    value: '周润发',
    label: '周润发',
  },
  {
    value: '刘德华',
    label: '刘德华',
  },
  {
    value: '张学友',
    label: '张学友',
  },
  {
    value: '郭富城',
    label: '郭富城',
  },
  {
    value: '黎明',
    label: '黎明',
  },
]

const url =
    'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
const srcList = [
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
  'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
  'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
  'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
]

const radio1 = ref('1')
const username=ref("周润发")
const age=ref(123)

//对象
const person=reactive({
  username:"刘德华",
  password:"123456",
  isSchool:false,
  headImage:"https://www.cqytxy.edu.cn/images/banner1.jpg",
  ImageStyle:{
    width:"100px",
    aspectRatio:1
  }
})
//点击事件
const clickBtn=()=>{
  alert("点击了"+username)
  console.log("点击了")
}

//修改毕业
const changSchool=()=>{
  person.isSchool=!person.isSchool
}

const opitions=reactive([
  {name:"章若楠"},
  {name:"周也"},
  {name:"田曦薇"},
  {name:"王楚然"},
  {name:"卢昱晓"}
])

const checked1 = ref(true)
const checked2 = ref(false)

const tableData = [
  {
    date: '2025-11-04',
    name: '周润发',
    address: '广州',
  },
  {
    date: '2025-11-04',
    name: '刘德华',
    address: '香港',
  },
  {
    date: '2025-11-04',
    name: '郭富城',
    address: '北京',
  },
  {
    date: '2025-11-04',
    name: '张学友',
    address: '重庆',
  },
  {
    date: '2025-11-04',
    name: '刘德华',
    address: '香港',
  },
  {
    date: '2025-11-04',
    name: '郭富城',
    address: '北京',
  },
  {
    date: '2025-11-04',
    name: '张学友',
    address: '重庆',
  },
  {
    date: '2025-11-04',
    name: '刘德华',
    address: '香港',
  },
  {
    date: '2025-11-04',
    name: '郭富城',
    address: '北京',
  },
  {
    date: '2025-11-04',
    name: '张学友',
    address: '重庆',
  },
  {
    date: '2025-11-04',
    name: '刘德华',
    address: '香港',
  },
  {
    date: '2025-11-04',
    name: '郭富城',
    address: '北京',
  },
  {
    date: '2025-11-04',
    name: '张学友',
    address: '重庆',
  },
  {
    date: '2025-11-04',
    name: '刘德华',
    address: '香港',
  },
  {
    date: '2025-11-04',
    name: '郭富城',
    address: '北京',
  },
  {
    date: '2025-11-04',
    name: '张学友',
    address: '重庆',
  },
]

const deleteHandler = (info) => {
  alert("删除"+info)
  //将删除的数据id传给服务器，服务器从数据库删除这条数据
  //刷新界面
}

//选择结果
let result=ref("")

//系统的生命周期函数，会在页面加载完毕之后回调
onMounted(()=>{
  alert("页面加载完毕")
})
const input = ref('')
</script>

<style scoped>
.el-button .custom-loading .circular {
  margin-right: 6px;
  width: 18px;
  height: 18px;
  animation: loading-rotate 2s linear infinite;
}
.el-button .custom-loading .circular .path {
  animation: loading-dash 1.5s ease-in-out infinite;
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
  stroke-width: 2;
  stroke: var(--el-button-text-color);
  stroke-linecap: round;
}
</style>